<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>预约挂号</title>
    <link href="<%=basePath %>css/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .subbutton {
            width: 50px;
            height: 30px;
            background-color: #19a188;
        }
        .label {
            width: 65px;
            float: left;
        }
        body {
            background:#FFF
        }
    </style>
    <script type="text/javascript" src="<%=basePath %>js/jquery.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/rl.js"></script>
    <script>
        let docterRochargeMap = {}; // 存放医生挂号费 key:docId value: 挂号费
        /**
         * 根据科室查询医生
         */
        function getDoctors() {
            let departId = $("#depart option:selected").val();
            let departName = $("#depart option:selected").text();
            $("#departId").val(departId);
            $("#departName").val(departName);
            console.log(departId);
            let docterSeletHtml = `<option value="" aria-checked="true">--请选择--</option>`;
            $.ajax({
                type: "GET",
                url: "<%=basePath%>makeRegister/getDoctersByDepartId?departId=" + departId,
                success: function(data) {
                    if(data.length > 0) {
                        $("#doctor").empty(); //先清空
                        for (let i = 0; i < data.length; i++) {
                            docterSeletHtml += `<option value=` + data[i].docid + `>` + data[i].name + `</option>`

                            // 处理医生挂号费
                            docterRochargeMap[data[i].docid] = data[i].rocharge;
                        }
                        $("#doctor").append(docterSeletHtml);
                    }
                }
            })
        }

        /**
         * 带出医生挂号费
         */
        function getDoctorRegistrationFee() {
            let doctorId = $("#doctor option:selected").val();
            let doctorName = $("#doctor option:selected").text();
            $("#doctorId").val(doctorId);
            $("#doctorName").val(doctorName);
            $("#roCharge").val(docterRochargeMap[doctorId]);
        }
    </script>
</head>
<body>
    <div id="contentWrap">
        <!--表格控件 -->
        <div id="widget table-widget">
            <div class="pageInfo">
                <form method="post" action="<%=basePath %>makeRegister/addMakeRegister" method="post" name="ThisForm">
                    <input type="hidden"  id="departId" name="departId" value="">
                    <input type="hidden"  id="departName" name="departName" value="">
                    <input type="hidden"  id="doctorId" name="doctorId" value="">
                    <input type="hidden"  id="doctorName" name="doctorName" value="">
                    <table style="width: 60%">
                        <tr>
                            <td width="43%" >
                                <label class="label">会员号</label>
                                <input type="text" name="memberId" id="memberId" value="" />
                            </td>
                            <td width="43%" >
                                <label class="label">挂号时间</label>
                                <input type="text" name="roTime" id="roTime" onClick="SelectDate(this.name)" value="" />
                            </td>
                        </tr>
                        <tr>
                            <td width="48%" >
                                <label class="label">科室</label>
                                <select id="depart" name="depart" onchange="getDoctors()">
                                    <option value="">--请选择--</option>
                                    <c:forEach items="${deptList}" var="dept">
                                        <option value="${dept.departid}">${dept.deptname}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td width="48%" >
                                <label class="label">医生</label>
                                <select id="doctor" name="doctor" onchange="getDoctorRegistrationFee()">
                                    <option value="" aria-checked="true">--请选择--</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td width="20%">
                                <label class="label">挂号费用</label>
                                <input type="text" name="roCharge" id="roCharge" value="" readonly="readonly" />元
                            </td>
                        </tr>
                    </table>
                    <div style="width: 50px;height: 30px; padding-left: 500px">
                        <input class="subbutton" type="submit" value="提交">
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>